<template>
  <div class="page-cont">
    <div class="header">
      <div class="user">
        <div class="name">
          {{ userInfo ? userInfo.username : '' }}
        </div>
        <div class="mobile">
          {{ userInfo ? userInfo.mobile : '' }}
        </div>
        <div
          class="notice"
          @click="$router.push({name: 'notice'})"
        >
          <van-badge :content="noticeNum ? noticeNum : ''">
            <img
              src="@/assets/notice.png"
              alt=""
            >
          </van-badge>
        </div>
      </div>
      <div class="option">
        <div
          class="item"
          @click="$router.push('/question')"
        >
          <img src="@/assets/anquan.png">质量安全列表
        </div>
        <div
          class="item"
          @click="$router.push('/handle')"
        >
          <img src="@/assets/chuli.png">待我处理
        </div>
      </div>
    </div>
    <div class="menu-list">
      <van-grid
        :border="false"
        :column-num="4"
      >
        <van-grid-item
          v-for="item in menuList.slice(0, 16)"
          :key="item.title"
          @click.native="jumpPage(item)"
        >
          <div class="img">
            <img :src="item.icon">
          </div>{{ item.title }}
        </van-grid-item>
      </van-grid>
    </div>
    <div class="b-list">
      <van-grid
        :border="false"
        :column-num="4"
      >
        <van-grid-item
          v-for="item in menuList.slice(16, 20)"
          :key="item.title"
          @click.native="jumpPage(item)"
        >
          <img :src="item.icon">
          <span>
            {{ item.title }}
          </span>
        </van-grid-item>
      </van-grid>
    </div>
    <bottom-nav active="home" />
  </div>
</template>

<script>
import BottomNav from '@/components/BottomNav/index.vue'
import { mapState } from 'vuex'

export default {
  name: "HomePage",
  components: {
    BottomNav
  },
  data() {
    return {
      noticeNum: 0,
      menuList: [
        { icon: require('@/assets/menu/1.png'), title: '桥梁信息', path: '/bridge' },
        { icon: require('@/assets/menu/2.png'), title: '预制梁管理', path: '/prebridge' },
        { icon: require('@/assets/menu/3.png'), title: '计划管理', path: '/plan' },
        { icon: require('@/assets/menu/4.png'), title: '日计划管理', path: '/dayplan' },
        { icon: require('@/assets/menu/5.png'), title: '周计划管理', path: '/weekplan' },
        { icon: require('@/assets/menu/6.png'), title: '生产汇总', path: '/produce' },
        { icon: require('@/assets/menu/7.png'), title: '钢筋加工管理', path: '/steel/product' },
        { icon: require('@/assets/menu/8.png'), title: '腹板绑扎管理', path: '/task/腹板绑扎' },
        { icon: require('@/assets/menu/9.png'), title: '顶板绑扎管理', path: '/task/顶板绑扎' },
        { icon: require('@/assets/menu/10.png'), title: '合模管理', path: '/task/合模' },
        { icon: require('@/assets/menu/11.png'), title: '浇筑管理', path: '/task/浇筑' },
        { icon: require('@/assets/menu/12.png'), title: '脱模管理', path: '/task/脱模' },
        { icon: require('@/assets/menu/13.png'), title: '蒸养管理', path: '/task/蒸养' },
        { icon: require('@/assets/menu/14.png'), title: '张拉管理', path: '/task/张拉' },
        { icon: require('@/assets/menu/15.png'), title: '压浆管理', path: '/task/压浆' },
        { icon: require('@/assets/menu/16.png'), title: '存梁区管理', path: '/storage' },
        { icon: require('@/assets/menu/17.png'), title: '监控视频', path: '/monitor' },
        { icon: require('@/assets/menu/18.png'), title: '台座轨迹记录', path: '/cartrack' },
        { icon: require('@/assets/menu/19.png'), title: '台座当前位置', path: '/carposition' },
        { icon: require('@/assets/menu/20.png'), title: '播放视频', path: '/player' },
      ]
    };
  },
  computed: {
    // 预加载数据
    ...mapState({preData: state => state.pre}),
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
  },
  methods: {
    jumpPage(item) {
      if (item.path) {
        this.$router.push({ path: item.path })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
